<div class="container_wrapper customer_register_default" id="customer_register">
    <div class="mo-card-content">
        <div class="mo-header mo-header-account">
            <div class="header-title">
                <span>{{lang.account.title.create}}</span>
            </div>
            <div class="header-divider"></div>
        </div>

        <form class="mo-form" id="register-form">
          <div class="plugin-container-header"></div>

            <div class="mo-form-item pub-mo-form-item-value" name="first_name">
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input class="mo-form-input" autocomplete="new-password" placeholder="{{lang.account.form.first_name}}" type="text" id="first_name" />
                    <label class="field_label" for="first_name">{{ lang.account.form.first_name }}</label>
                </div>
            </div>
            <div class="mo-form-item" name="last_name">
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input class="mo-form-input" autocomplete="new-password" placeholder="{{lang.account.form.last_name}}" type="text" id="last_name" />
                    <label class="field_label" for="last_name">{{ lang.account.form.last_name }}</label>
                </div>
            </div>
            {% if storeConfig.checkout_contact %}
            <div class="mo-form-item" name="contact">
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input id="contact" class="mo-form-input" autocomplete="new-password" placeholder="{{ storeConfig.other_concat | default : 'Whatsapp / Skype' }}" type="text" />
                    <label for="contact" class="field_label">{{ storeConfig.other_concat | default : 'Whatsapp / Skype' }}</label>
                </div>
            </div>
            {% endif %}
            <div class="mo-form-item" name="email">
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input id="email" class="mo-form-input" autocomplete="new-password" placeholder="{{lang.account.form.email}}" type="text" />
                    <label for="email" class="field_label">{{ lang.account.form.email }}</label>
                </div>
            </div>
            <div class="mo-form-item" name="password">
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input id="password" class="mo-form-input" autocomplete="new-password" autocomplete placeholder="{{lang.account.form.password}}" type="password" />
                    <label for="password" class="field_label">{{ lang.account.form.password }}</label>
                </div>
            </div>
            <div class="register-service">
               
            </div>
            <div id="service_eror">{{lang.customer.link_services_error}}</div>
            {% if storeConfig.checkout_subscription > 0 %}
            <div class="mo-form-item checkout-main">
            
                <label class="checkbox_label mo-checkbox" for="sub_checkbox">  
                    <input class=" mo-checkbox_input order_checkbox insurance_checkbox" type="checkbox" {% if storeConfig.checkout_subscription == "1" %}checked{% endif %} name="sub_checkbox" value="1" id="sub_checkbox"/>
                    <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.account.create.sub}} 
                </label>
            </div>
            {% endif %}
            <div class="mo-form-item">
                <div class="mo-form-item-value">
                    <div id="register" class="main_btn form_btn">{{lang.account.create.register}}</div>
                </div>
            </div>
            <div class="mo-form-item">
                <span class="text-tip"><a href="/account/login">{{lang.account.title.log}}</a></span>
            </div>
             <div class="plugin-container-footer"></div>

        </form>

       
    </div>
</div>
<script type="text/javascript">
    (function () {
        let oem_service_admin = moi.getCookie('oem_service_admin')

        function setOptionsClick() {
            $("#service-select").on("click", function () {
                if ($(this).find('.service-right').hasClass("show-options")) {
                    $(this).find('.service-right').removeClass("show-options")
                } else {
                    $(this).find('.service-right').addClass("show-options")
                }
                $(".register-service .service_option").toggle()
            })
        }
        function orderService() {
            try {
                let service_list = {{service_list | json}}
                let oem_service_customeropt = storeConfig.oem_service_customeropt
               
                service_list = service_list.filter(item => item.weight !== 0)
                if(service_list.length === 0) {
                    oem_service_admin = ""
                    return
                }
                let selectIndex = service_list.findIndex(item => item.id == oem_service_admin)
                let notFindSelectIndex = selectIndex
                let isManual = (oem_service_admin === null || notFindSelectIndex < 0) && oem_service_customeropt == "1"
                if(selectIndex < 0) {
                    let weigthArr = service_list.map(item => item.weight)
                    let maxWeigth = Math.max(...weigthArr)
                    selectIndex = weigthArr.findIndex(item => item === maxWeigth)
                }
                let seevice_select_box = `
                    <div class="service-list ${isManual ? 'manual' : ''}" id="service-select" data-id="${isManual ? '' : service_list[selectIndex].id}">
                        <div class="service_label">{{lang.checkout.link_services}}</div>
                        <div class="service-left">
                            <span class="service-img ${service_list[selectIndex].avatar !== "" ? "show_img": "show_svg"}">
                                <img src="${service_list[selectIndex].avatar}">
                                {% include icon_order_service_avatar %}
                            </span>
                            <div class="name">${service_list[selectIndex].name}</div>
                        </div>
                        <div class="service-right">
                            {% include icon_order_service_down %}
                        </div>
                    </div>
                `
                let options = ''
                service_list.forEach(item => {
                    options += `
                        <div class="service-list service-option-item" data-id="${item.id}">
                            <div class="service-left">
                                <span class="service-img ${item.avatar !== "" ? "show_img" : "show_svg"}">
                                    <img src='${item.avatar}'>
                                    {% include icon_order_service_avatar %}
                                </span>
                                <div class="name">${item.name}</div>
                            </div>
                        </div>
                        `
                })
                $(".register-service").append(`${seevice_select_box}<div class="service_option">${options}</div>`)
                if(oem_service_admin !== null && notFindSelectIndex >= 0) {
                    
                    if(storeConfig.oem_service_associationpattern != 0) {
                        setOptionsClick()
                    }else {
                        $("#service-select .service-right svg").css('display', 'none')
                    }
                   
                }else {
                    if(oem_service_customeropt != 2) {
                        setOptionsClick()
                    }else {
                        $("#service-select .service-right svg").css('display', 'none')
                    }
                }

                $(".service_option .service-option-item").on("click", function() {
                    let id = $(this).attr('data-id')
                    let selectItem = service_list.filter(item => item.id == id)
                    if(selectItem[0].avatar != "") {
                        $("#service-select img").attr("src", selectItem[0].avatar)
                        $("#service-select .service-img").removeClass('show_svg').addClass('show_img')
                    }else {
                        $("#service-select .service-img").removeClass('show_img').addClass('show_svg')
                    }
                    $("#service-select").attr("data-id", selectItem[0].id)
                    $("#service-select .name").text(selectItem[0].name)
                    $("#service-select").find('.service-right').addClass("show-options")
                    $(".register-service .service_option").toggle()
                    $('#service_eror').hide()
                    $("#service-select").removeClass('manual')
                })
                
            } catch (error) {
                console.log(error)
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            orderService()
	    })

        


       
       
        
        const rules = {
            email: [{ required: true, message: "{{lang.account.ruls.email}}" },{
                validator:function(value, rules,callback){
                    var emailPat=/^(.+)@(.+)$/;
                    var matchArray=value.match(emailPat);
                    if(!matchArray){
                        return callback("{{lang.account.ruls.email_invalid}}");
                    }
                }
            }],
            password: [{ required: true, message: "{{lang.account.ruls.password}}" },{
                validator:function(value, rules,callback){
                    if(value.length>15 || value.length<6){
                        return callback("{{lang.account.ruls.password_invalid}}");
                    }
                }
            }],
            contact: [{ required: true, message: "{{lang.account.ruls.contact}}" }],
            first_name: [{ required: true, message: "{{lang.account.ruls.first_name}}" }],
            last_name: [{ required: true, message: "{{lang.account.ruls.last_name}}" }]
        };
        const form = moi.form("#register-form", rules);
        const checkoutUrl =  moi.getUrlParam('checkout_url') || "{{checkout_url}}" || '{{routes.account_url}}';
        $("#register").click(function () {
            let admin_id = $('.register-service #service-select').attr("data-id")
            if(admin_id === '') {
                $("#service_eror").show()
            }
            if (form.allVerify() && admin_id !== '') {
                const load = moi.nodeShowLoading(this);
                const params = moi.paramsValueString(form.allValue());
                {% if storeConfig.checkout_subscription > 0 %}
                const is_sub = $("#sub_checkbox").get(0).checked;
                params["is_sub"] = is_sub ? 1 : 0;
                {% endif %}
                params['admin_id'] = $('.register-service #service-select').attr("data-id")
                moi.ajax( {
                    url: "/account/register",
                    type: "post",
                    data: JSON.stringify(params),
                    complete: function () {
                        load.close();
                    },
                    success: function (data) {
                        if (!data.code) {
                            callback_sign_up();
                            callback_generate_lead();
                            moi.message({ content: '{{ lang.customers.login.registered_successfully }}',onClose(){
                                moi.href(checkoutUrl);

                            }});
                        } else {
                            return moi.alert({ title: data.msg });
                        }
                    }
                });
            }
        });
    })();
</script>
